<template>
	<view>
		<!-- 导航栏 -->
		<u-navbar
			title="宸坤美食"
			:is-back="true"
			:title-bold="true"
			:background="background"
			title-color="#fff"
			:border-bottom="false"
		></u-navbar>
		
		<!-- 主体内容 -->
		<view class="content_box">
			
			<view class="content_head">
				<view class="image_box" :style="{ backgroundImage: `url(${fileUrl})` }"></view>
				<view class="detail">
					<vie class="detail_title">
						<view class="title">
							<u-tag 
							:text="getWeek(groundingTime)"
							mode="dark"
							shape="circle"
							size="mini"
							type="warning"/>
							<text style="margin-left: 10rpx">{{ comboName }}</text>
						</view>
						<view class="describe">配菜：{{ comboDesc }}</view>
					</vie>
					<view class="detail_btn">
						<view class="btn" @click="placeBtn(item)">
							<u-tag text="预约" mode="dark" shape="circle" type="error" size="mini" />
						</view>
					</view>
				</view>
			</view>
			<view>
				<u-tabs
					:list="list" 
					:current="current" 
					bar-width="50" 
					active-color="orange" 
					@change="change">
				</u-tabs>
				<view v-if="current == 0">
					<view class="page-box">
						<view class="introduce">
							<text class="text">{{introduce}}</text>
						</view>
						<view class="introduce_img" :style="{ backgroundImage: `url(${fileUrl})` }"></view>
						<view class="introduce_img" :style="{ backgroundImage: `url(${fileUrl})` }"></view>
						<view class="btn_box">
							<u-button type="warning" @click="submitBtn" shape="circle">立即预约</u-button>
						</view>
					</view>
				</view>
				<view v-if="current == 1">
					<view class="page-box" v-for="(item, index) in evalList" :key="index">
						<view class="eval_box">
							<vie class="eval_head">
								<u-image 
									width="60rpx"
									height="60rpx"
									class="eval_avatar" 
									shape="circle" 
									:src="`${item.avatarUrl}`"></u-image>
								<view class="eval_text">
									<view class="eval_score">
										<text>{{item.nickName}}</text>
										<u-rate :current="`${item.score}`"  :disabled="true"></u-rate>
									</view>
									<text style="line-height: 2.5;">{{item.createTime}}</text>
								</view>
							</vie>
							
							<view class="eval_pl">
								<u-read-more 
									:toggle="true" 
									:closeText="closeText" 
									:shadow-style="shadowStyle" 
									:fontSize="fontSize"
									text-indent="0"
									show-height="100">
									<rich-text :nodes="`${item.evaluate}`"></rich-text>
								</u-read-more>
							</view>
							<view class="eval_tc">
								<text>套餐：{{item.comboName}}</text>
							</view>
							<view class="eval_image" v-if="item.evaluateUrl !== ''">
								<view style="margin-right: 20rpx;"
									v-for="(eval, i) in item.evaluateUrl"
									:key="i">
									<u-image class="eval_tp" :src="`http://127.0.0.1/rop${eval}`" width="200rpx" height="200rpx"></u-image>
								</view>
							</view>
							<u-line hair-line="5px" color="#ff9900"/>
						</view>
					</view>
				</view>

			</view>
			
		</view>
	</view>
</template>

<script>
	import { comboEvalList } from '@/api/index'
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#ff9900'
				},
				closeText: '展开',
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx"
				},
				fileUrl: '',
				comboName: '',
				comboDesc: '',
				comboPrice: '',
				groundingTime: '',
				introduce: '',
				list: [
					{
						name: '套餐介绍'
					},
					{
						name: '用户评价'
					}
				],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				form: {
					pageNum: 1,
					pageSize: 3
				},
				evalList: []
			}
		},
		onLoad(options) {
			const detailsData = JSON.parse(decodeURIComponent(options.data))
			console.log(detailsData, "传参")
			this.fileUrl = detailsData.fileUrl
			this.comboName = detailsData.comboName
			this.comboDesc = detailsData.comboDesc
			this.comboPrice = detailsData.comboPrice
			this.groundingTime = detailsData.groundingTime
			this.introduce = detailsData.remake
			
			const comboId = detailsData.id
			this.comboEvalList(comboId)
			
		},
		methods: {
			async comboEvalList(comboId){
				const  data  = await comboEvalList({comboId, ...this.form})
				this.evalList = data.rows
				console.log(this.evalList,"用户评价参数")

				for(let i = 0; this.evalList.length > i; i++ ){
					let urlList = data.rows[i].evaluateUrl;
					let pjurlList = urlList.split(',');
					this.evalList[i].evaluateUrl = pjurlList
				} 
				console.log(this.evalList, "url")
			},
			change(index) {
				this.current = index;
				//如报错则用this.current = index.index;代替上面这句
			},
			getWeek(date) {
				// 时间戳
				const week = this.moment(date).day()
			
				switch (week) {
					case 1:
						return '周一'
					case 2:
						return '周二'
					case 3:
						return '周三'
					case 4:
						return '周四'
					case 5:
						return '周五'
					case 6:
						return '周六'
					case 0:
						return '周日'
				}
			}
		}
	}
</script>
<style>
page{
	height: 100%;
}
</style>
<style scoped lang="scss">
.content_box {
	padding: 25rpx 20rpx;
	
	.image_box {
		border-radius: 30rpx;
		background-image: url('https://ckscm.oss-cn-shenzhen.aliyuncs.com/rop_applet_material/image/11111.png');
		background-size: cover;
		background-repeat: no-repeat;
		width: 100%;
		height: 400rpx;
		background-position: center;
	}
	
	.detail{
		padding: 20rpx 10rpx;
		display: flex;
		
		.detail_title {
			 width: 90%;
			.title {
				font-size: 26rpx;
				font-weight: bold;
			}
			
			.describe {
				font-size: 24rpx;
				color: #999;
				margin-top: 12rpx;
			}
		}
		
		.detail_btn {
			display: flex;
			
			.btn {
				display: flex;
				margin-top: 6rpx;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				color: #101010;
			}
		}
	}
	
	.introduce { 
		background-color: #e6e6e6;
		border-radius: 10px;
		padding: 10px;
		
	}
	
	.introduce_img {
		border-radius: 30rpx;
		background-image: url('https://ckscm.oss-cn-shenzhen.aliyuncs.com/rop_applet_material/image/11111.png');
		background-size: cover;
		background-repeat: no-repeat;
		width: 100%;
		height: 800rpx;
		margin-top: 10px;
		background-position: center;
	}
	 
	.page-box {
		width: 686rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		margin-left: 15rpx;
	}
	
	.btn_box {
		margin-top: 40rpx;
	}
	
	.eval_box{
		display: flex;
		flex-flow: column;
		
		.eval_head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			
			.eval_score{
				display: flex;
				flex-flow: column;
			}
			.eval_avatar{
				margin-right: 20rpx;
			}
			.eval_text{
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				width: 100%;
			}
		}
		.eval_pl{
			margin-top: 20rpx;
			line-height: 1.5;
		}
		.eval_tc{
			margin-top: 20rpx;
		}
		.eval_image{
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			
			.eval_tp{
				margin-right: 20rpx;
			}
		}
	}
	
}
</style>